{extend name="public:base" /}

{block name="css"}

<style>
    .approval-model .search-box,
    .carbon-model .search-box {
        height: 45px;
    }

    .approval-model .search-box .approval-search-input,
    .carbon-model .search-box .carbon-search-input {
        width: 70%;
        float: left;
        margin-right: 5px
    }

    .approval-model .approval-user-box,
    .carbon-model .carbon-user-box {
        height: 400px;
        border: 1px solid #e6e6e6;
        overflow-y: auto
    }

    .approval-model .approval-user-box .approval-user,
    .carbon-model .carbon-user-box .carbon-user {
        width: 100%;
        height: 66px;
        margin: 0 auto;
        float: left;
        border-bottom: 1px solid #e6e6e6;
    }

    .approval-model .approval-user-box .disabled,
    .carbon-model .carbon-user-box .disabled {
        background-color: #ccc;
    }

    .approval-model .approval-user-box .active,
    .carbon-model .carbon-user-box .active {
        background-color: #ffab66;
    }

    .approval-model .approval-user-box .approval-user .username {
        width: 100%;
        height: 30px;
        margin-top: 3px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #1ab394;
        padding: 0 1%;
    }

    .carbon-model .carbon-user-box .carbon-user .username {
        width: 93%;
        height: 30px;
        margin-top: 3px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #1ab394;
        padding: 0 1%;
        float: left;
    }

    .carbon-model .carbon-user-box .carbon-user .sort {
        float: left;
        color: #fff;
        padding: 1px 8px;
        margin-top: 3px;
        font-weight: bold;
        background-color: #1ab394;
        border: 1px solid #ccc;
    }

    .approval-model .approval-user-box .approval-user .other,
    .carbon-model .carbon-user-box .carbon-user .other {
        width: 100%;
        height: 30px;
        margin-top: 3px;
        font-size: 16px;
        padding: 0 1%;
    }

    .approval-model .approval-user-box .approval-user .other .account,
    .carbon-model .carbon-user-box .carbon-user .other .account {
        width: 50%;
        height: 30px;
        float: left;
    }

    .approval-model .approval-user-box .approval-user .other .section,
    .carbon-model .carbon-user-box .carbon-user .other .section {
        width: 50%;
        height: 30px;
        float: right;

    }
</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post" action="{:url('/index/Dingding/submit_application')}">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">请选择申请项目</label>
                                <div class="col-sm-2">
                                    <select class="form-control seal_select" name="seal_id">
                                        <option value="0">请选择申请项目</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="form-control app_select" name="app_id">
                                        <option value="0">请选择审批类型</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item approval-box" style="display: none">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">审批人</label>
                                <div class="col-sm-4">
                                    <div type="text" class="form-control col-sm-6 choose-approval" onclick="chooseApproval(0)" style="float: left; text-align: center; cursor: pointer;">点击选择审批人</div>
                                    <div class="btn btn-w-m btn-danger col-sm-2" onclick="delApprovalUser(0)" style="float: left; margin-left: 20px">删除</div>
                                </div>
                            </div>

                            <input type="hidden" class="check_approval_ids" name="check_approver_ids">

                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-4">
                                    <div type="text" class="form-control col-sm-6 choose-approval" onclick="chooseApproval(1)" style="float: left; text-align: center; cursor: pointer;">点击选择审批人</div>
                                    <div class="btn btn-w-m btn-danger col-sm-2" onclick="delApprovalUser(1)" style="float: left; margin-left: 20px">删除</div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-4">
                                    <div type="text" class="form-control col-sm-6 choose-approval" onclick="chooseApproval(2)" style="float: left; text-align: center; cursor: pointer;">点击选择审批人</div>
                                    <div class="btn btn-w-m btn-danger col-sm-2" onclick="delApprovalUser(2)" style="float: left; margin-left: 20px">删除</div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-4">
                                    <div type="text" class="form-control col-sm-6 choose-approval" onclick="chooseApproval(3)" style="float: left; text-align: center; cursor: pointer;">点击选择审批人</div>
                                    <div class="btn btn-w-m btn-danger col-sm-2" onclick="delApprovalUser(3)" style="float: left; margin-left: 20px">删除</div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">抄送人</label>
                                <div class="col-sm-6">
                                    <div class="btn btn-w-m btn-primary" onclick="openCarbonModel()">选择抄送人</div>
                                </div>
                            </div>

                            <input type="hidden" class="check_carbon_ids" name="check_carbon_ids">

                            <div class="carbon-box">

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">文件名称</label>
                                <div class="col-sm-3">
                                    <input type="text" name="name" class="form-control" placeholder="请输入文件名称">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">文件编号</label>
                                <div class="col-sm-3">
                                    <input type="text" name="file_number" class="form-control file_number" placeholder="请输入文件编号">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">申请内容</label>
                                <div class="col-sm-3">
                                    <textarea class="form-control" maxlength="140" name="content" rows="8"></textarea>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">图片上传</label>
                                <div class="col-sm-3">
                                    <input type="file" id="imgs_file" multiple style="display: none">
                                    <input type="hidden" name="imgs" id="imgs" value="{$info['imgs']|default=''}"/>
                                    <div id="imgs_div">
                                        <!-- 已上传图片盒子 -->
                                        {volist name="info.imgs_arr" id="vo"}
                                        <div class="upload-files-div">
                                            <img class="upload-files" src="{$vo.path}"/><span class="upload-file-del" onclick="delThisPic(this)">删除</span>
                                        </div>
                                        {/volist}
                                    </div>
                                    <img class="upload-file" onclick="uploadImgs('imgs_file', 'imgs', 'imgs_div')" src="__ADMIN__/img/uploadBtn.png" id="upload_imgs">
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <!--<div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">附件</label>
                                <div class="col-sm-3">
                                    <input type="text" name="name" class="form-control" placeholder="请输入申请内容">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>-->

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">备注信息</label>
                                <div class="col-lg-3">
                                    <div class="ibox ">
                                        <textarea class="form-control" maxlength="140" name="remark" rows="8"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" name="lat" value="1">
                        <input type="hidden" name="lng" value="1">
                        <input type="hidden" name="uid" value="{$uid}">
                        <input type="hidden" name="company_id" value="{$company_id}">
                        <input type="hidden" name="is_pc" value="1">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--  审批人弹出框  -->
<div class="modal inmodal approval-model" id="myModal3" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" onclick="closeApprovalModel()">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <div class="search-box">
                    <input type="text" placeholder="请输入关键词搜索" class="form-control approval-search-input">
                    <button class="btn btn-w-m btn-primary col-sm-2 approval-search">搜索</button>
                </div>

                <div class="approval-user-box">

                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" onclick="closeApprovalModel()">关闭</button>
                <button type="button" class="btn btn-primary" id="confirmApproval">确认选择</button>
            </div>
        </div>
    </div>
</div>

<!--  抄送人弹出框  -->
<div class="modal inmodal carbon-model" id="myModal4" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" onclick="closeCarbonModel()">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <div class="search-box">
                    <input type="text" placeholder="请输入关键词搜索" class="form-control carbon-search-input">
                    <button class="btn btn-w-m btn-primary col-sm-2 carbon-search">搜索</button>
                </div>

                <div class="carbon-user-box">

                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" onclick="closeCarbonModel()">关闭</button>
                <button type="button" class="btn btn-primary" id="confirmCarbon">确认选择</button>
            </div>
        </div>
    </div>
</div>{/block}

{block name="js"}
<script>
    var company_id = `{$company_id}`,
      seal_list = `{$seal_list}` ? JSON.parse(`{$seal_list}`) : [],
      prev_seal_id = `{$prev_seal_id}`,
      prev_app_id = `{$prev_app_id}`,
      check_approval_user_list_index = 0,
      check_approval_user_list = [null, null, null, null],// 审批人
      check_carbon_user_list = [];// 抄送人

    $(function () {
        renderSelect();
        $('.file_number').val(createFileNumber())
    })


    // https域名下才可以获取到经纬度
    function getPosition() {
        return new Promise((resolve, reject) => {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    let latitude = position.coords.latitude
                    let longitude = position.coords.longitude
                    let data = {
                        latitude: latitude,
                        longitude: longitude
                    }
                    resolve(data)
                }, function () {
                    reject(arguments)
                })
            } else {
                reject('你的浏览器不支持当前地理位置信息获取')
            }
        })
    }

    // 获取当前经纬度坐标
    getPosition().then(result => {
        // 返回结果示例：
        // {latitude: 30.318030999999998, longitude: 120.05561639999999}
        // 一般小数点后只取六位，所以用以下代码搞定
        let queryData = {
            longtitude: String(result.longitude).match(/\d+\.\d{0,6}/)[0],
            latitude: String(result.latitude).match(/\d+\.\d{0,6}/)[0],
            channelType: '00'
        }
        console.log(queryData)
        // 以下放置获取坐标后你要执行的代码:
        // ...
    }).catch(err => {
        console.log(err)
    })

    function createFileNumber() {
        var timestamp = Date.parse(new Date());
        var date = new Date(timestamp);
        var Y = date.getFullYear();
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return Y + '' + M + '' + D + '' + parseInt(Math.random() * 100000);
    }

    // 选择审批人
    function chooseApproval(index) {
        check_approval_user_list_index = index;
        openApprovalModel(index)
    }

    // 搜索审批人
    $('.approval-search').click(function () {
        var search_value = $('.approval-search-input').val();
        getApprovalUserThenRender(search_value);
    })

    // 打开审批人弹框
    function openApprovalModel() {
        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal3').css('display', 'block').addClass('show');

        $.post("{:url('index/Dingding/selectApprover')}", {
            company_id: company_id
        }, res => {
            var res = JSON.parse(res),
              list = res.data;

            renderApprovalUser(list);
        })
    }

    function getApprovalUserThenRender(search_value = '') {
        $.post("{:url('index/Dingding/selectApprover')}", {
            company_id, search_value
        }, res => {
            var res = JSON.parse(res),
              list = res.data;

            renderApprovalUser(list);
        })
    }

    // 渲染审批人用户列表
    function renderApprovalUser(list) {
        var user_box_html = '';
        if (list.length > 0) {
            var check_ids = check_approval_user_list.map(val => val != null ? val.uid : '');// 已选择审批人用户id列表

            list.forEach(function (val) {
                var disabled = '';
                if (check_ids.indexOf(val.uid) > -1) disabled = 'disabled';

                user_box_html += `<div class="approval-user ` + disabled + `" onclick="chooseApprovalUser(this, ` + val.uid + `, '` + val.username + `')">
                        <div class="username">` + val.username + `</div>
                        <div class="other">
                            <div class="account">账号：` + val.mobile + `</div>
                            <div class="section">部门：` + val.department_list + `</div>
                        </div>
                    </div>`;
            })
        }

        $('.approval-user-box').html(user_box_html);
    }

    // 选中的审批人信息：{uid: 1, username: '姓名'}
    var approval_user = [];

    function chooseApprovalUser(that, uid, username) {
        var is_disabled = $(that).hasClass('disabled');
        if (!is_disabled) {
            $('.approval-user').removeClass('active');
            $(that).addClass('active');

            approval_user = {uid, username};
        }
    }

    // 审批人确认选择
    $('#confirmApproval').click(function () {
        check_approval_user_list[check_approval_user_list_index] = approval_user;
        closeApprovalModel();

        $('.choose-approval').eq(check_approval_user_list_index).html(check_approval_user_list[check_approval_user_list_index].username)

        var check_ids = check_approval_user_list.map(val => val != null ? val.uid : '').filter(d => d);// 已选择审批人用户id列表
        $('.check_approval_ids').val(check_ids.join(','))
    })

    // 删除审批人
    function delApprovalUser(index) {
        check_approval_user_list[index] = null;
        $('.choose-approval').eq(index).html('点击选择审批人')

        var check_ids = check_approval_user_list.map(val => val != null ? val.uid : '').filter(d => d);// 已选择审批人用户id列表
        $('.check_approval_ids').val(check_ids.join(','))
    }

    // 关闭审批人弹框
    function closeApprovalModel() {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#myModal3').css('display', 'none').removeClass('show');
    }

    var carbon_user_list = [];

    // 打开抄送人弹框
    function openCarbonModel() {
        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal4').css('display', 'block').addClass('show');

        $.post("{:url('index/Dingding/selectCarbon')}", {
            company_id: company_id
        }, res => {
            var res = JSON.parse(res),
              list = res.data;

            carbon_user_list = list;
            renderCarbonUser();
        })
    }

    // 选择抄送人
    function chooseCarbonUser(that, uid, username) {
        var is_active = $(that).hasClass('active');
        if (is_active) {
            // 取消选中
            var check_ids = check_carbon_user_list.map(val => val != null ? val.uid : '');// 已选择抄送人用户id列表
            var index = check_ids.indexOf(uid);
            check_carbon_user_list.splice(index, 1);
        } else {
            // 选中
            if (check_carbon_user_list.length == 3) check_carbon_user_list.splice(2, 1);
            check_carbon_user_list.push({uid, username});
        }

        renderCarbonUser()
    }

    // 渲染抄送人用户列表
    function renderCarbonUser() {
        var user_box_html = '';
        if (carbon_user_list.length > 0) {
            var check_ids = check_carbon_user_list.map(val => val != null ? val.uid : '');// 已选择抄送人用户id列表

            carbon_user_list.forEach(function (val) {
                var active = '';
                var sort_html = '';
                var check_index = check_ids.indexOf(val.uid)
                if (check_index > -1) {
                    active = 'active';
                    sort_html = `<div class="sort">` + (check_index + 1) + `</div>`
                }

                user_box_html += `<div class="carbon-user ` + active + `" onclick="chooseCarbonUser(this, ` + val.uid + `, '` + val.username + `')">
                        <div class="username">` + val.username + `</div>
                        ` + sort_html + `
                        <div class="other">
                            <div class="account">账号：` + val.mobile + `</div>
                            <div class="section">部门：` + val.department_list + `</div>
                        </div>
                    </div>`;
            })
        }
        $('.carbon-user-box').html(user_box_html);
    }

    // 搜索抄送人
    $('.carbon-search').click(function () {
        var search_value = $('.carbon-search-input').val();
        getCarbonUserThenRender(search_value);
    })

    function getCarbonUserThenRender(search_value = '') {
        $.post("{:url('index/Dingding/selectCarbon')}", {
            company_id, search_value
        }, res => {
            var res = JSON.parse(res),
              list = res.data;

            carbon_user_list = list;

            renderCarbonUser();
        })
    }

    // 抄送人确认选择
    $('#confirmCarbon').click(function () {
        closeCarbonModel();

        if (check_carbon_user_list.length > 0) {
            var carbon_item = '';
            check_carbon_user_list.forEach(function (val, key) {
                carbon_item += `<div class="form-group row carbon-item">
                                    <label class="col-sm-1 col-form-label"></label>
                                    <div class="col-sm-4">
                                        <div type="text" class="form-control col-sm-6" style="float: left; text-align: center">` + val.username + `</div>
                                        <div class="btn btn-w-m btn-danger col-sm-2" onclick="delCarbonUser(` + key + `)" style="float: left; margin-left: 20px">删除</div>
                                    </div>
                                </div>`;
            })
            $('.carbon-box').html(carbon_item);

            var check_ids = check_carbon_user_list.map(val => val != null ? val.uid : '');// 已选择审批人用户id列表
            $('.check_carbon_ids').val(check_ids.join(','))
        } else {
            layer.msg('请选择抄送人');
        }
    })

    function delCarbonUser(index) {
        $('.carbon-item').eq(index).remove();
        check_carbon_user_list.splice(index, 1);

        var check_ids = check_carbon_user_list.map(val => val != null ? val.uid : '');// 已选择抄送人用户id列表
        $('.check_carbon_ids').val(check_ids.join(','))
    }

    // 关闭审批人弹框
    function closeCarbonModel() {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#myModal4').css('display', 'none').removeClass('show');
    }

    $('.seal_select').change(function () {
        prev_seal_id = $(this).val();
        prev_app_id = 0;
        renderSelect();
    })

    $('.app_select').change(function () {
        prev_app_id = $(this).val();

        $('.check_approval_ids').val('');
        check_approval_user_list = [null, null, null, null];
        check_approval_user_list_index = 0;
        $('.choose-approval').html('点击选择审批人');

        renderSelect();
    })

    function renderSelect() {
        var seal_option = `<option value="0">请选择申请项目</option>`;
        var app_option = `<option value="0">请选择审批类型</option>`;
        seal_list.forEach(function (val) {
            var selected = '';
            if (val.id == prev_seal_id) {
                selected = 'selected';
                var approval_list = val.approval_list;
                approval_list.forEach(function (v) {
                    var app_selected = '';
                    if (v.id == prev_app_id) {
                        app_selected = 'selected';
                        if (v.is_free == 2) {
                            $('.approval-box').show();
                        } else {
                            $('.approval-box').hide();
                        }
                    }
                    app_option += `<option value="` + v.id + `" ` + app_selected + `>` + v.type_name + `</option>`;
                })
            }
            seal_option += `<option value="` + val.id + `" ` + selected + `>` + val.name + `</option>`;
        })
        $('.seal_select').html(seal_option);
        $('.app_select').html(app_option);
    }
</script>{/block}